<template>
    <div class="rolePermiss">
        <div class="roleLeft">
            <div class="title flexbetween mb20">
                <span>角色分类</span>
                <el-link type="primary" :underline="false" @click="addRole" v-if="menuAuthCodes.includes('M118')">新增角色</el-link>
            </div>
            <el-scrollbar style="height: calc(100% - 50px);">
                <div class="roleList">
                    <div :class="['roleItem', 'flexbetween',{'active':currentRoleId == item.id}]" v-for="(item,i) in roleList"
                         :key="item.id" @click="changeRole(item)">
                        <span class="name">{{item.roleName}}</span>
                        <p>
                            <el-tooltip effect="light" content="编辑" placement="top" :enterable="false"
                                        v-if="item.canEdit && menuAuthCodes.includes('M120')">
                                <span class="iconfont icon-bianji" @click.stop="editRole(item)"></span>
                            </el-tooltip>
                            <el-tooltip effect="light" content="删除" placement="top" :enterable="false"
                                        v-if="item.canDelete && menuAuthCodes.includes('M119')">
                                <span class="iconfont icon-shanchu" @click.stop="delRole(item.id,i)"></span>
                            </el-tooltip>
                        </p>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <div class="roleRight">
            <el-tabs v-model="activeName" v-loading="roleLoading">
                <el-tab-pane label="资源列表" name="resourceList">
                    <el-tree ref="menuAuthTree" node-key="menuCode" class="treeLine" :data="menuAuthTree" :props="menuTreeProps"
                             show-checkbox default-expand-all check-strictly :expand-on-click-node="false" :indent="0"></el-tree>
                    <el-button type="primary" size="small" class="saveAuth" @click="saveMenuAuth"
                               v-show="iscanEdit && menuAuthCodes.includes('M120')">保存</el-button>
                </el-tab-pane>
                <el-tab-pane label="数据权限" name="dataPermiss">
                    数据权限
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 新增、编辑角色 -->
        <el-dialog :visible="roleVisible" :title="roleTitle" width="640px" class="roleDialog" @close="roleCancel">
            <el-form ref="roleForm" :model="roleForm" :rules="roleRules" label-width="130px">
                <el-form-item label="名称" prop="roleName">
                    <el-input v-model="roleForm.roleName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="roleDesc">
                    <el-input v-model="roleForm.roleDesc" size="small"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="text" @click="roleCancel">取消</el-button>
                <el-button type="primary" size="small" @click="roleSubmit">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getRolesList, addRole, updateRole, removeRole, getMenuAuthTree,
    getRoleMenuAuthIds, upsertRoleMenuAuth
} from "@/api/systemConfig";
import { mapGetters } from "vuex";
export default {
    name: "rolePermiss",
    data() {
        return {
            roleLoading: false,
            activeName: "resourceList",
            currentRoleId: "",
            roleList: [],
            dialogType: "add",
            editRoleId: "",
            roleTitle: "新增角色",
            roleVisible: false,
            roleForm: {
                roleName: "",
                roleDesc: ""
            },
            roleRules: {
                roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
                roleDesc: [{ required: true, message: '请输入角色描述', trigger: 'blur' }],
            },
            menuAuthTree: [],
            menuTreeProps: {
                children: 'childList',
                label: 'menuDesc'
            },
            iscanEdit: false,
        }
    },
    methods: {
        //获取角色列表
        getRolesList(isFirst = false) {
            if (!this.menuAuthCodes.includes("M117")) {
                return;
            }
            getRolesList().then(resp => {
                if (resp.status == 0) {
                    this.roleList = resp.data || [];
                    if (isFirst && this.roleList.length > 0) {
                        this.changeRole(this.roleList[0]);
                    }
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        addRole() {
            this.roleTitle = "新增角色";
            this.dialogType = "add";
            this.roleVisible = true;
        },
        editRole(data) {
            this.roleTitle = "编辑角色";
            this.dialogType = "edit";
            this.roleForm.roleName = data.roleName;
            this.roleForm.roleDesc = data.roleDesc;
            this.editRoleId = data.id;
            this.roleVisible = true;
        },
        delRole(id, i) {
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                removeRole({ id }).then((resp) => {
                    if (resp.status == 0) {
                        this.roleList.splice(i, 1);
                        this.$antMessage.success("删除成功");
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }).catch(() => { });
        },
        roleSubmit() {
            this.$refs.roleForm.validate((valid) => {
                if (valid) {
                    var param = {
                        roleName: this.roleForm.roleName,
                        roleDesc: this.roleForm.roleDesc
                    }
                    if (this.dialogType == 'add') {
                        addRole(param).then(resp => {
                            if (resp.status == 0) {
                                this.getRolesList();
                                this.roleCancel();
                                this.$antMessage.success("添加成功");
                            } else {
                                this.$antMessage.warning(resp.message);
                            }
                        });
                    } else {
                        param.id = this.editRoleId;
                        param.enterpriseId = this.enterpriseInfo.id;
                        updateRole(param).then(resp => {
                            if (resp.status == 0) {
                                this.roleList.forEach((item) => {
                                    if (item.id == this.editRoleId) {
                                        item.roleName = this.roleForm.roleName;
                                        item.roleDesc = this.roleForm.roleDesc;
                                    }
                                });
                                this.roleCancel();
                                this.$antMessage.success("编辑成功");
                            } else {
                                this.$antMessage.warning(resp.message);
                            }
                        });
                    }
                }
            });
        },
        roleCancel() {
            this.roleVisible = false;
            this.$refs.roleForm.resetFields();
        },
        changeRole(data) {
            this.iscanEdit = data.canEdit;
            this.roleLoading = true;
            this.currentRoleId = data.id;
            getRoleMenuAuthIds({ roleId: data.id }).then(resp => {
                this.roleLoading = false;
                if (resp.status == 0) {
                    var authList = resp.data || [];
                    this.$refs.menuAuthTree.setCheckedKeys(authList);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        getMenuAuthTree() {
            if (!this.menuAuthCodes.includes("M117")) {
                return;
            }
            getMenuAuthTree().then(resp => {
                if (resp.status == 0) {
                    this.menuAuthTree = resp.data;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            })
        },
        //保存菜单权限
        saveMenuAuth() {
            var param = {
                roleId: this.currentRoleId,
                menuAuthCodes: this.$refs.menuAuthTree.getCheckedKeys() || []
            }
            upsertRoleMenuAuth(param).then(resp => {
                if (resp.status == 0) {
                    this.$antMessage.success(resp.message);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        }
    },
    created() {
        this.getRolesList(true);
        this.getMenuAuthTree();
    },
    computed: {
        ...mapGetters(["enterpriseInfo"]),
    },
}
</script>

<style lang="scss">
.rolePermiss {
    display: flex;
    height: calc(100% - 65px);
    > div {
        height: 100%;
    }
    .roleLeft {
        width: 260px;
        padding: 20px;
        background: #f5f7fa;
        border-radius: 6px;
        margin-right: 20px;
        flex-shrink: 0;
        .title {
            > span {
                font-size: 16px;
                font-weight: bold;
                color: #363c43;
            }
        }
        .roleItem {
            height: 20px;
            margin-bottom: 20px;
            color: #676e75;
            cursor: pointer;
            &.active {
                color: #6b5ee2;
            }
            &:hover {
                > p {
                    display: inline-block;
                }
            }
            .name {
                max-width: 70%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            > p {
                display: none;
                .iconfont {
                    color: #b7c1c9;
                    font-size: 20px;
                    margin-left: 10px;
                    &:hover {
                        color: #abb4bc;
                    }
                }
            }
        }
    }
    .roleRight {
        flex: 1;
        .el-tabs {
            height: 100%;
            .el-tabs__content {
                height: calc(100% - 65px);
                .el-tab-pane {
                    position: relative;
                    height: 100%;
                    .saveAuth {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                    }
                }
            }
        }
    }
    .roleDialog {
        .el-dialog__body {
            padding-top: 60px;
            overflow: hidden;
            .el-form-item__content {
                width: 400px;
            }
        }
    }
    .el-tree {
        height: calc(100% - 50px);
        overflow-y: scroll;
        .el-icon-caret-right {
            padding-top: 8px;
            position: relative;
            left: -3px;
            z-index: 999;
            background: #fff;
            padding-left: 0;
            margin-left: 6px;
        }
        .el-icon-caret-right:before {
            background: url("../../../../assets/images/treezk.png") no-repeat;
            content: "";
            display: block;
            width: 22px;
            height: 22px;
            font-size: 22px;
            background-size: 22px;
        }
        .el-icon-caret-right.expanded:before {
            background: url("../../../../assets/images/treesq.png") no-repeat;
            content: "";
            display: block;
            width: 22px;
            height: 22px;
            font-size: 22px;
            background-size: 22px;
        }
        .el-icon-caret-right.is-leaf:before {
            background: none;
        }
        .el-tree-node__expand-icon.expanded {
            transform: none;
        }
    }
    .treeLine {
        .el-tree-node:before {
            top: -20px;
            left: -3px;
        }
        .el-tree-node:after {
            width: 40px;
            top: 13px;
            left: 0;
        }
        .is-leaf.el-icon-caret-right + .el-checkbox {
            margin-left: 28px;
        }
        > .el-tree-node {
            padding-left: 0;
            &::after,
            &::before {
                border: none;
            }
        }
    }
}
</style>